<template>
  <el-card
    :body-style="{ padding: '0px' }"
    style="border-radius: 15px"
    shadow="hover"
    @click="handleClick"
  >
    <img
      :src="activity.imageSrc"
      :alt="activity.title + ' Image'"
      style="margin-bottom: 10px"
      class="image"
      @click="handleClick"
    />
    <div class="title-container">
      <span
        style="
          font-weight: bold;
          font-family: 'Cera-Bold', serif;
          font-size: 18px;
          margin: 10px;
        "
        class="title"
        >{{ activity.title }}</span
      >
    </div>
    <div v-if="activity.type === 'activity'" class="activity-footer">
      <svg
        class="icon"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
      >
        <path
          d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"
          fill="#000000"
        ></path>
      </svg>
      <span>{{ activity.peopleNum }}</span>
    </div>
    <div v-if="activity.type === 'challenge'" class="challenge-footer">
      <el-row style="width: 100%">
        <el-col :span="24">
          <div class="challenge-countdown">
            <span
              style="
                margin-right: 10px;
                margin-bottom: 10px;
                display: inline-flex;
                align-items: center;
              "
            >
              <svg
                class="icon"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
              >
                <path
                  d="M878.08 731.274667a32 32 0 0 1-54.88-32.938667A360.789333 360.789333 0 0 0 874.666667 512c0-200.298667-162.368-362.666667-362.666667-362.666667S149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667a360.789333 360.789333 0 0 0 186.314667-51.445334 32 32 0 0 1 32.928 54.88A424.778667 424.778667 0 0 1 512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667c0 78.293333-21.152 153.568-60.586667 219.274667z m-548.704-81.898667L480 498.741333V320a32 32 0 0 1 64 0v192a32 32 0 0 1-9.376 22.624l-160 160a32 32 0 1 1-45.248-45.248z"
                  fill="#000000"
                ></path>
              </svg>
              21 days left
            </span>
          </div>
        </el-col>
        <el-col>
          <div class="submit-challenge-line">
            <span class="inline-flex">
              <button class="challenge-submit-button" @click="clickButton">
                SUBMIT ENTRY
              </button>
              <span class="status-text">{{ activity.status }}</span>
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="activity.type === 'idea'" class="user-info">
      <div
        title="OneLittleSpark"
        class="user-avatar"
        style="unicode-bidi: isolate"
      >
        <a href="/profile/c2624cc3-2107-4a8b-90e9-2d304e36eeee">
          <img
            :src="activity.user.profilePictureUrl"
            alt="OneLittleSpark Avatar"
            class="avatar avatar-xxs"
          />
        </a>
      </div>
      <div class="user-detail">
        <div class="user-alias text-truncate">
          <a
            href="/profile/c2624cc3-2107-4a8b-90e9-2d304e36eeee"
            aria-label="View OneLittleSpark"
            tabindex="0"
            data-axc="global_search:card"
            data-axa="click"
            data-axl="user_name"
            data-login-required="true"
          >
            {{ activity.user.username }}
          </a>
        </div>
        <div class="card-published">
          <time :datetime="activity.currentDate" :title="activity.currentDate"
            >{{ activity.user.post_createTime }}
          </time>
        </div>
      </div>
    </div>
    <div v-if="activity.type === 'idea'" class="activity-footer">
      <el-col :span="18"></el-col>
      <el-col :span="6">
        <svg
          class="icon"
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
        ></svg>
        <span>{{ activity.commentsNum }}</span>
      </el-col>
    </div>
  </el-card>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  props: {
    activity: {
      required: true,
    },
  },
  methods: {
    ...mapActions(["updateToDetail"]),

    handleClick() {
      if (this.activity.type === "idea") {
        this.$router.push({ name: "post_detail" });
      } else if (this.activity.type === "challenge") {
        console.log("跳转，带着id", this.activity.activityId);
        this.$router.push({
          name: "challenge_detail",
          query: { id: this.activity.activityId },
        });
      } else {
        localStorage.setItem("activityId", this.activity.activityId);
        this.$router.push({
          name: "activity_detail",
          params: { activityId: this.activity.activityId },
        });
      }
    },
    clickButton() {
      this.$router.push({ name: "upload_challenge" });
    },
  },
  computed: {
    ...mapGetters(["toDetail"]),
  },
};
</script>

<style scoped>
.inline-flex {
  display: inline-flex; /* 子元素水平排列 */
  align-items: center; /* 垂直方向居中对齐 */
  justify-content: space-between; /* 两端对齐，空余空间在中间 */
  width: 100%;
  gap: 28px; /* 元素间距 */
}

.status-text {
  color: #333; /* 文字颜色 */
}

.image {
  width: 100%;
  display: block;
}

.title-container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.activity-footer,
.challenge-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #fff;
  border-radius: 0 0 15px 15px;
}

.activity-footer .icon,
.challenge-footer .icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.user-info {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
}

.user-info .user-detail {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.125rem;
  margin-left: -115px;
}

.user-info .user-detail .user-alias {
  font-weight: 500;
}

.user-info .user-detail .card-published {
  color: #394754;
}

.user-avatar img {
  width: 12%; /* 头像宽度 */
  height: auto;
}

.avatar {
  background-color: #ffbd00;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-left: 10px;
}

.challenge-countdown {
  display: flex;
  align-items: center;
}

.challenge-submit-button {
  background: rgb(230, 168, 0) none repeat scroll 0% 0% / auto padding-box
    border-box;
  padding: 12px 18px;
  border-radius: 8px;
  line-height: 16px;
  text-align: left;
  border: none; /* 去掉边框 */
  outline: none; /* 去掉聚焦时的轮廓 */
  font-family: Cera-Bold, serif;
}

.submit-challenge-line {
  width: 100%;
}

.status-text {
  font-family: Cera-Bold, serif;
}
</style>
